/* 
路由表
*/
import {lazy, Suspense} from 'react'
// import About from '../pages/About'
// import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import { Navigate } from 'react-router-dom'
import MessageDetail from '../pages/MessageDetail'

/* 
import xxx from '模块': 静态引入    ==> 打包在一起
import('模块'): 动态引入  ==> 单独打包
需要对路由组件进行动态引入 => 对路由组件单独打包

import()动态引入在一个函数内, 而这个函数开始是不执行的, 当访问对应的路由路径时, 才执行
只有当访问对应的路径时, 才会去加载对应的打包文件  => 懒加载
*/
const About = lazy(() => import('../pages/About'));
const Home = lazy(() => import('../pages/Home'));


// 定义路由表数组
const routes = [
  {
    path: '/about',
    element: (
      // 用于显示Loading界面(在没有加载得到对应的路由组件打包文件)
      // fallback(备胎): 指定loading页面
    <Suspense fallback={<h2>loading....</h2>}>
      <About/> {/* 加载到对应的打包文件后, 才显示 */}
    </Suspense>
    )
  },
  {
    path: '/home',
    element: (
      <Suspense fallback={<h2>loading....</h2>}>
        <Home /> {/* 加载到对应的打包文件后, 才显示 */}
      </Suspense>
    ),
    // 配置子路由
    children: [
      {
        path: '/home/news',  // 路径左侧的/代表项目根路径
        // path: '/news',  // 不可以 => 只有先匹配上一级路由, 才能进一步匹配二级路由
        element: <News/>
      },
      {
        // path: '/home/message',
        path: 'message', // 简写方式 => 本质上还是/home/message
        element: <Message/>,
        children: [
          {
            // path: 'detail/:id/:title/:content
            path: 'detail',  // 注册路由时不需要特别指定
            element: <MessageDetail/>
          }
        ]
      },
    ]
  },
  /* 当访问/时, 自动跳转到/about */
  {
    path: "/",
    element: <Navigate to="/about"/>
  },

  /* {
    path: "/404",
    element: <NotFound/>
  },

  // 在最后配置一个匹配任意路径的路由 => 自动跳转到404页面
  {
    path: "*", // *匹配任意路径
    element: '/404'
  } */
]
// 访问一个不存在的路径: /xxx => 

export default routes